<template>
  <div>
    <el-button class="btnBack" size="mini" type="primary" @click="goBack"
      >返回</el-button
    >
    <div id="gannan"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
import icon from "@/assets/img/icon.png";
import { gannan } from "@/assets/js/map_js/gannan.js";
import { gannanRegions } from "@/assets/js/map_js/color";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.getMap();
    });
  },
  methods: {
    getMap() {
      var dom = document.getElementById("gannan");
      var myChart = echarts.init(dom);
      var option;
      var geoJson = gannan;
      myChart.showLoading();
      myChart.hideLoading();
      echarts.registerMap("gannan", geoJson);
      console.log(JSON.parse(geoJson));
      myChart.setOption(
        (option = {
          geo3D: {
            map: "gannan",
            roam: false,
            zLevel: "8",

            top: "0%", //组件的视图离容器四个方向的距离。
            left: "0%",
            right: "0%",
            bottom: "0%",
            itemStyle: {
              color: "#0479B1",
              opacity: 1,
              borderWidth: 0.4,
              borderColor: "#000"
            },
            // 动画效果
            viewControl: {
              // autoRotate: false,

              // autoRotateAfterStill: 3,
              distance: 120, //可以改变地图远近距离---即大小
              // minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              // alpha: 20, //Y轴旋转
              // maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              // minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              // beta: 0, //x轴旋转
              // maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
              // animation: true, // 是否开启动画。[ default: true ]
              // animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              // animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
              // rotateMouseButton: "left", //旋转操作使用的鼠标按键
              rotateSensitivity: 1, //禁止旋转地图
              zoomSensitivity: "0" //实现禁止缩放地图
            },
            // 鼠标经过样式
            emphasis: {
              disabled: true, //是否可以被选中
              label: {
                //移入时的高亮文本
                show: true,
                color: "#333", //显示字体颜色
                fontSize: 14 //显示字体
              },
              itemStyle: {
                color: "#fff" //显示移入的区块变白色
              }
            },
            select: {
              disabled: true //不能点击地图
            },
            label: {
              show: true,
              position: "top",
              color: "#333", //地图初始化区域字体颜色
              fontSize: 14
            },
            shading: "lambert",
            light: {
              //光照阴影
              main: {
                // color: "#fff", //光照颜色
                intensity: 0.8, //光照强度
                shadow: true, //是否显示阴影
                shadowQuality: "height", //阴影质量 ultra //阴影亮度
                alpha: 40,
                beta: 10
              },
              ambient: {
                intensity: 0.7
              }
            },
            // 对不同的区块进行着色
            regions: gannanRegions
          },
          // 这个地图在页面中看不到，只是为了定位lines 和 涟漪
          geo: {
            zlevel: "8",
            show: true,
            map: "gannan",
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "100%", //地图大小
            roam: false,
            label: {
              // show: true,
              fontFamily: " Microsoft YaHei",
              fontSize: 12,
              color: "#fff"
            },

            itemStyle: {
              //每一块区域的样式
              normal: {
                areaColor: "rgba(255,255,255,0)",
                borderColor: "rgba(255,255,255,0)",
                borderWidth: 0
              }
            },
            // 鼠标经过样式--区域颜色、和提示
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                borderColor: "rgba(255,255,255,0)",
                areaColor: "rgba(255,255,255,0)"
              }
            },
            select: {
              disabled: true //不能点击地图
            }
          },
          series: [
            // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: "8",
              effect: {
                show: true,
                period: 2, //箭头指向速度，值越小速度越快
                trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "triangle", //箭头图标
                symbolSize: 10, //图标大小
                color: "rgba(255,255,255,0)" // 图标颜色
              },
              lineStyle: {
                type: [3, 5],
                dashOffset: 5,
                show: true,
                width: 2.5, //尾迹线条宽度
                opacity: 0.4, //尾迹线条透明度
                curveness: -0.5, //尾迹线条曲直度
                color: "#ABF9BF" // 飞线颜色
              },
              label: {
                show: true,
                position: "start",
                formatter: function(params) {
                  //文本提示框
                  return (
                    "\n\n{title|" +
                    "甘肃东方韵药业科技有限公司" +
                    "}\n{value|" +
                    "" +
                    "}"
                  );
                },
                width: 90,
                height: 275,
                align: "center",
                rich: {
                  //标题样式
                  title: {
                    width: 100,
                    align: "center",
                    lineHeight: 30,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#00FFFB",
                    padding: [3, 4, 30, 6]
                  },
                  value: {
                    //内容样式
                    height: 90,
                    width: 60,
                    backgroundColor: {
                      image: icon
                    }
                  }
                }
              },
              data: [
                {
                  coords: [
                    [108, 40], // 起点
                    [97, 39.744023] // 终点
                  ]
                }
              ]
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              effectType: "ripple", //涟漪特效
              showEffectOn: "render",
              // 散点样式
              rippleEffect: {
                color: "#A5F590",
                period: 2, // 涟漪特效的动画周期
                scale: 8, // 涟漪特效动画中波纹的最大缩放比例
                brushType: "fill" // 涟漪特效的波纹绘制方式
              },
              // 散点大小
              symbolSize: 5,
              hoverAnimation: true,
              // 标志的样式
              itemStyle: {
                color: "rgba(255,255,255, .7)"
              },
              zlevel: 9,
              data: [{ value: [97, 39.744023] }]
            }
          ]
        })
      );
      myChart.on("click", params => {});
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
    goBack() {
      this.$emit("activeIndex", "甘肃省");
    }
  }
};
</script>

<style lang="sss" scoped>
#gannan {
  width: 750px;
  height: 600px;
  border: 1px solid #fff;
}
.btnBack{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
}
</style>
